<template>
  <div>
    <p>eat: {{obj.hobby.eat}}</p>
    <button @click="obj.hobby.eat = '🍑'">修改 eat</button>
    <button @click="obj.hobby = { eat: '🍑' }">修改 eat</button>
  </div>
</template>

<script>
import { reactive, watch, isReactive } from 'vue'
export default {
  setup() {
    const obj = reactive({
      hobby: {
        eat: '西瓜',
      },
    })

    // #1 监听了一个 reactive 数据
    /* watch(obj, () => {
      console.log('触发监听');
    }) */

    // !#2 reactive 内如包装是一个对象的话，其实这个对象也是一个 reactive 类型的数据

    // console.log(isReactive(obj.hobby)); // true

    // #3 监听了一个 reactive 数据
    /* watch(obj.hobby, () => {
      console.log('触发监听');
    }) */

    // !#6 把 obj.hobby 当做了一个普通数据去监听，只有对 obj.hobby 【本身】的修改才会触发监听
    /* watch(() => obj.hobby, () => {
      console.log('触发监听');
    }) */

    // !#7 把上面两种情况综合到一起了，对 obj.hobby 本身和内部数据的修改都会触发监听啦
    watch(() => obj.hobby, () => {
      console.log('触发监听');
    }, {
      deep: true
    })

    // #4 watch 监听的数据只能是 ref、reactive、函数、[ref、reactive、函数]
    /* watch(obj.hobby.eat, () => {
      console.log('触发监听');
    }) */

    // #5 如何监听普通数据类型呢？
    // !语法：() => 要监听的普通数据
    /* watch(() => obj.hobby.eat, (newValue, oldValue) => {
      console.log('触发监听', newValue, oldValue);
    }) */
    return {obj}
  }
}
</script>

<style lang="scss" scoped></style>